import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:life_milestones/MS-Model/MS-home-model.dart';
import 'package:life_milestones/controller/MS-home-controller.dart';
import 'package:stroke_text/stroke_text.dart';
import 'package:provider/provider.dart';

import '../../component/MS-select-time-view.dart';
import '../MS-main-page.dart';

class MSGroupDetailPage extends StatefulWidget {
  final int id;
  const MSGroupDetailPage({super.key, required this.id});

  @override
  State<StatefulWidget> createState() {
    return _MSGroupDetailPageState();
  }
}

class _MSGroupDetailPageState extends State<MSGroupDetailPage> {
  TextEditingController textEditingController = TextEditingController();
  bool isEditing = false;
  @override
  Widget build(BuildContext context) {
    return Consumer<MSHomeController>(builder:
        (BuildContext context, MSHomeController controller, Widget? child) {
      var category = controller.getCategoryById(widget.id);
      return Scaffold(
        resizeToAvoidBottomInset: false,
          backgroundColor: const Color(0xFFF9FADA),
          body: Column(
            children: [
              Container(
                color: const Color(0xFF148857),
                padding: EdgeInsets.only(top: ScreenUtil().statusBarHeight),
                height: ScreenUtil().statusBarHeight + 90.w,
                width: double.infinity,
                child: DecoratedBox(
                  decoration: const BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage("images/home-edit-header-bg.png"))),
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 24.w),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        InkWell(
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                          child: Image.asset(
                            "images/back.png",
                            width: 25.w,
                            fit: BoxFit.fitWidth,
                          ),
                        ),
                        StrokeText(
                          text: category!.name,
                          textStyle: TextStyle(
                              fontSize: 18.sp,
                              fontWeight: FontWeight.bold,
                              color: Colors.white),
                          strokeColor: Color(0xFF065F39),
                          strokeWidth: 2.w,
                        ),
                        InkWell(
                          onTap: () {
                            setState(() {
                              isEditing = true;
                            });
                          },
                          child: Image.asset(
                            "images/home-add-icon.png",
                            width: 25.w,
                            fit: BoxFit.fitWidth,
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
              Expanded(
                  child: Stack(
                children: [
                  Positioned.fill(
                      child: CustomScrollView(
                    slivers: [
                      isEditing
                          ? SliverToBoxAdapter(
                              child: Container(
                                width: double.infinity,
                                padding: EdgeInsets.only(
                                    left: 24.w, right: 24.w, top: 20.w),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    StrokeText(
                                      text: "Item",
                                      strokeColor: Color(0xFF065F39),
                                      strokeWidth: 3.w,
                                      textColor: Colors.white,
                                      textStyle: TextStyle(
                                          fontSize: 16.sp,
                                          fontWeight: FontWeight.bold),
                                    ),
                                    Padding(
                                        padding: EdgeInsets.only(top: 10.w),
                                        child: Container(
                                          padding: EdgeInsets.symmetric(
                                              horizontal: 10.w),
                                          decoration: BoxDecoration(
                                              color: const Color(0x33148857),
                                              borderRadius: BorderRadius.all(
                                                  Radius.circular(13.5.w))),
                                          child: TextField(
                                            controller: textEditingController,
                                            decoration: const InputDecoration(
                                                border: InputBorder.none),
                                          ),
                                        )),
                                    Padding(
                                      padding: EdgeInsets.only(top: 10.w),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Padding(
                                            padding:
                                                EdgeInsets.only(right: 20.w),
                                            child: InkWell(
                                              onTap: () {
                                                if (textEditingController
                                                    .text.isNotEmpty) {
                                                  var item = MSItem(
                                                      time: "0",
                                                      name:
                                                          textEditingController
                                                              .text,
                                                      categoryId: category.id!,
                                                      isFinished: 0,
                                                      userId: category.userId);
                                                  controller.addTask(item);
                                                }
                                              },
                                              child: Container(
                                                  width: 127.w,
                                                  height: 35.w,
                                                  decoration: const BoxDecoration(
                                                      image: DecorationImage(
                                                          image: AssetImage(
                                                              "images/home-save-button-bg.png"))),
                                                  alignment: Alignment.center,
                                                  child: StrokeText(
                                                    text: "Save and Add",
                                                    strokeWidth: 2.w,
                                                    strokeColor: Colors.white,
                                                    textColor:
                                                        Color(0xFF333333),
                                                    textStyle: TextStyle(
                                                        fontSize: 12.sp,
                                                        fontWeight:
                                                            FontWeight.bold),
                                                  )),
                                            ),
                                          ),
                                          InkWell(
                                            onTap: (){
                                              if (textEditingController
                                                  .text.isNotEmpty) {
                                                var item = MSItem(
                                                    time: "0",
                                                    name:
                                                    textEditingController
                                                        .text,
                                                    categoryId: category.id!,
                                                    isFinished: 0,
                                                    userId: category.userId);
                                                controller.addTask(item);
                                                Navigator.of(context).pop();
                                              }
                                            },
                                            child: Container(
                                                width: 127.w,
                                                height: 35.w,
                                                decoration: const BoxDecoration(
                                                    image: DecorationImage(
                                                        image: AssetImage(
                                                            "images/home-save-button-bg.png"))),
                                                alignment: Alignment.center,
                                                child: StrokeText(
                                                  text: "Save",
                                                  strokeWidth: 2.w,
                                                  strokeColor: Colors.white,
                                                  textColor: const Color(0xFF333333),
                                                  textStyle: TextStyle(
                                                      fontSize: 12.sp,
                                                      fontWeight:
                                                          FontWeight.bold),
                                                )),
                                          )
                                        ],
                                      ),
                                    ),
                                    Padding(
                                      padding: EdgeInsets.only(top: 10.w),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Padding(
                                            padding:
                                                EdgeInsets.only(right: 20.w),
                                            child: InkWell(
                                              onTap: (){
                                                controller.deleteAllFinishedTask(category);
                                              },
                                              child: Container(
                                                  width: 127.w,
                                                  height: 35.w,
                                                  decoration: const BoxDecoration(
                                                      image: DecorationImage(
                                                          image: AssetImage(
                                                              "images/home-save-button-bg.png"))),
                                                  alignment: Alignment.center,
                                                  child: StrokeText(
                                                    text: "Delete complete",
                                                    strokeColor: Colors.white,
                                                    textColor:
                                                        const Color(0xFF333333),
                                                    strokeWidth: 2.w,
                                                    textStyle: TextStyle(
                                                        fontSize: 12.sp,
                                                        fontWeight:
                                                            FontWeight.bold),
                                                  )),
                                            ),
                                          ),
                                          InkWell(
                                            onTap: (){
                                              controller.deleteAllTask(category);
                                            },
                                            child: Container(
                                                width: 127.w,
                                                height: 35.w,
                                                decoration: const BoxDecoration(
                                                    image: DecorationImage(
                                                        image: AssetImage(
                                                            "images/home-save-button-bg.png"))),
                                                alignment: Alignment.center,
                                                child: StrokeText(
                                                  text: "Delete All",
                                                  strokeWidth: 2.w,
                                                  strokeColor: Colors.white,
                                                  textColor: Color(0xFF333333),
                                                  textStyle: TextStyle(
                                                      fontSize: 12.sp,
                                                      fontWeight:
                                                          FontWeight.bold),
                                                )),
                                          )
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            )
                          : const SliverToBoxAdapter(
                              child: SizedBox(),
                            ),
                      SliverPadding(
                        padding: EdgeInsets.only(
                            left: 24.w, right: 24.w, top: 20.w, bottom: 20.w),
                        sliver: SliverToBoxAdapter(
                          child: StrokeText(
                            text: "Not completed",
                            textStyle: TextStyle(
                                fontSize: 18.sp,
                                height: 1.1,
                                fontWeight: FontWeight.bold,
                                color: Colors.white),
                            strokeWidth: 3.w,
                            strokeColor: Color(0xFF065F39),
                          ),
                        ),
                      ),
                      SliverList(
                          delegate: SliverChildBuilderDelegate(
                              (BuildContext context, int index) {
                        var item = category.listOfPending[index];
                        return Padding(
                          padding: EdgeInsets.only(
                              left: 24.w, right: 24.w, bottom: 6.w),
                          child: Container(
                            height: 72.w,
                            width: 328.w,
                            decoration: const BoxDecoration(
                                image: DecorationImage(
                                    image: AssetImage(
                                        "images/home-detail-list-bg.png"))),
                            child: Stack(
                              children: [
                                Positioned(
                                  left: 8.w,
                                  top: 16.w,
                                  child: Container(
                                    width: 35.w,
                                    height: 35.w,
                                    decoration: const BoxDecoration(
                                        image: DecorationImage(
                                            image: AssetImage(
                                                "images/home-list-no-bg.png"))),
                                    alignment: Alignment.center,
                                    child: Text(
                                      (index + 1).toString(),
                                      style: TextStyle(
                                          fontSize: 22.sp,
                                          color: Color(0xFF63BD75)),
                                    ),
                                  ),
                                ),
                                Align(
                                  alignment: Alignment.topCenter,
                                  child: Container(
                                    width: 180.w,
                                    padding: EdgeInsets.only(top: 14.w),
                                    child: Column(
                                      children: [
                                        Text(
                                          item.name,
                                          style: TextStyle(
                                              fontSize: 18.sp,
                                              overflow: TextOverflow.ellipsis,
                                              height: 1.1,
                                              fontWeight: FontWeight.bold,
                                              color: Color(0xFF7A3F17)),
                                        ),
                                        UnconstrainedBox(
                                          child: Builder(
                                              builder: (BuildContext context) {
                                            return InkWell(
                                              onTap: () {
                                                if (MSMainPage.of(context) !=
                                                    null) {
                                                  showModalBottomSheet(
                                                      context:
                                                          MSMainPage.of(context)!
                                                              .context,
                                                      builder:
                                                          (BuildContext context) {
                                                        return MSSelectTimeView(
                                                          onSelected:
                                                              (String? value) {
                                                            if (value != null) {
                                                              item.time = value;
                                                              controller
                                                                  .updateTask(
                                                                      item);
                                                            }
                                                          },
                                                        );
                                                      });
                                                }
                                              },
                                              child: Container(
                                                alignment: Alignment.center,
                                                  padding: EdgeInsets.symmetric(
                                                      horizontal: 20.w),
                                                  height: 20.w,
                                                  decoration: BoxDecoration(
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              10.w),
                                                      color: const Color(0xFFBB815A)),
                                                  child: Text(
                                                      item.time == "0"
                                                          ? "add time"
                                                          : item.time,
                                                      style: TextStyle(
                                                          fontSize: 12.sp,
                                                          height: 1.1,
                                                          fontWeight:
                                                              FontWeight.w500,
                                                          color: Color(
                                                              0xFFD0A25A)))),
                                            );
                                          }),
                                        )
                                      ],
                                    ),
                                  ),
                                ),
                                Positioned(
                                  right: 20.w,
                                  top: 19.w,
                                  child: InkWell(
                                    onTap: () {
                                      item.isFinished = 1;
                                      controller.updateTask(item);
                                    },
                                    child: Image.asset(
                                      "images/home-detail-check-box.png",
                                      width: 30.w,
                                      fit: BoxFit.fitWidth,
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        );
                      }, childCount: category.listOfPending.length)),
                      SliverPadding(
                        padding: EdgeInsets.only(
                            left: 24.w, right: 24.w, top: 20.w, bottom: 20.w),
                        sliver: SliverToBoxAdapter(
                          child: StrokeText(
                            text: "Finish",
                            textStyle: TextStyle(
                                fontSize: 18.sp,
                                height: 1.1,
                                fontWeight: FontWeight.bold,
                                color: Colors.white),
                            strokeWidth: 3.w,
                            strokeColor: Color(0xFF065F39),
                          ),
                        ),
                      ),
                      SliverList(
                          delegate: SliverChildBuilderDelegate(
                              (BuildContext context, int index) {
                                var item = category.listOfFinished[index];
                        return Padding(
                          padding: EdgeInsets.only(
                              left: 24.w, right: 24.w, bottom: 6.w),
                          child: Container(
                            height: 72.w,
                            width: 328.w,
                            decoration: const BoxDecoration(
                                image: DecorationImage(
                                    image: AssetImage(
                                        "images/home-detail-list-bg.png"))),
                            child: Stack(
                              children: [
                                Positioned(
                                  left: 8.w,
                                  top: 16.w,
                                  child: Image.asset(
                                    "images/home-list-finished.png",
                                    width: 35.w,
                                    fit: BoxFit.fitWidth,
                                  ),
                                ),
                                Align(
                                  alignment: Alignment.center,
                                  child: SizedBox(
                                    width: 180.w,
                                    child: Text(
                                      item.name,
                                      style: TextStyle(
                                        overflow: TextOverflow.ellipsis,
                                          fontSize: 18.sp,
                                          height: 1.1,
                                          fontWeight: FontWeight.bold,
                                          color: const Color(0xFF7A3F17)),
                                    ),
                                  )
                                )
                              ],
                            ),
                          ),
                        );
                      }, childCount: category.listOfFinished.length)),
                      SliverToBoxAdapter(
                        child: Container(
                          height: 125.w,
                          width: double.infinity,
                        ),
                      )
                    ],
                  )),
                  Positioned(
                      right: -46.w,
                      bottom: -35.w,
                      child: Image.asset(
                        "images/home-people.png",
                        width: 288.w,
                        fit: BoxFit.fitWidth,
                      ))
                ],
              ))
            ],
          ));
    });
  }
}
